<template>
  <view class="main">
    <view class="top">
      <search leftWidth='300' bgColor='black'>
        <blockquote @click='goBack' slot="leftMain">
          <view class="left">
            <u-icon name="arrow-left" color="white" size="28"></u-icon> <text>关注列表</text>
          </view>
        </blockquote>
      </search>
    </view>
    <view class="abottom">
      <view class="u-page__item">
        <u-collapse accordion>
          <u-collapse-item title="默认分组">
            <blockquote v-if="focusList.length!=0">
              <view v-for="e in focusList" :key="e._id" class="item">
                <view class="iitem">
                  <view class="left">
                    <u-avatar :src="dealImgs(e.userInfo[0].avator)"></u-avatar> <text
                      class="u-collapse-content">{{e.userInfo[0].nickname}}</text>
                  </view>
                  <view @click="ccancelfocus(e.userInfo[0]._id)" class="right">
                    已关注
                  </view>
                </view>
                <view class="bot">
                  关注时间:{{e.createTime}}
                </view>
              </view>
            </blockquote>
            <blockquote v-else>
              <text> 暂无关注信息，请先关注</text>
            </blockquote>

          </u-collapse-item>
          <u-collapse-item title="特别关心">
            <text class="u-collapse-content">待开发</text>
          </u-collapse-item>
        </u-collapse>
      </view>
    </view>
  </view>
</template>

<script>
  import search from "@/component/search/search.vue";
  import {
    cmode
  } from '@/env.js'
  import {
    getfocuslist,
    cancelfocus
  } from '@/api/user.js'
  export default {
    components: {
      search
    },
    data() {
      return {
        focusList: [],
        basesrc: cmode,
      };
    },
    computed: {
      dealImgs() {
        return function(data) {
          return this.basesrc + data
          // if (data) {
          //   return data.map(e => this.basesrc + e)
          // } else {
          //   return []
          // }
        };
      }
    },
    methods: {
      ccancelfocus(befocusedid) {
        cancelfocus({
          befocusid: befocusedid
        }).then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
          }
        }).finally(() => {
          this.cgetfocuslist()
        })
      },
      goBack() {
        this.$Router.back()
      },
      cgetfocuslist() {
        getfocuslist().then(res => {
          this.focusList = res.data
        })
      }
    },
    onReady() {
      this.cgetfocuslist()
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    padding: 0 20rpx;
    margin: 20 0rpx;

    .bot {
      margin: 20rpx 0;
    }

    .iitem {
      display: flex;
      align-items: center;
      justify-content: space-between;


      .left {
        display: flex;
        align-items: center;

        text {
          margin-left: 30rpx;
        }
      }

      .right {
        width: 80rpx;
        height: 40rpx;
        background-color: #c00000;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20rpx;
        color: white;
      }
    }

  }

  .u-page {
    padding: 0;

    &__item {

      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;

        &__slot-title {
          color: $u-primary;
          font-size: 28rpx;
        }
      }
    }
  }

  .u-collapse-content {
    color: $u-tips-color;
    font-size: 28rpx;
  }

  .main {
    width: 100vw;
    height: auto;

    .abottom {
      width: 100vw;
      height: auto;
      background-color: white;
      margin-top: calc(var(--status-bar-height) + 100rpx);
      color: black;
      box-sizing: border-box;
      font-size: 28rpx;
    }

    .top {
      width: 100vw;
      height: 100rpx;
      position: fixed;
      top: 0;
      z-index: 1;

      .left {
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }

      .right {
        display: flex;

        .dw {
          margin: 0 10rpx;
        }
      }
    }
  }
</style>
